<template>
  <div>
    <!-- 顶部导航位置 -->
    <van-nav-bar title="我的收藏" @click-left=" goUpPage()" left-text="返回" left-arrow> </van-nav-bar>
    <!-- 内容位置 -->
    <div>
      <Bg>
        <div class="content">
          <div class="Probox" v-for="(item, index) in ProData" :key="index">
            <HotPro :HotProData="item">
              <van-icon  @click="notlike(item.pid)" name="delete" />
            </HotPro>
          </div>
        </div>
      </Bg>
    </div>
  </div>
</template>

<script>
// 导入背景插件
import Bg from "../components/Bg";
// 导入商品组件
import HotPro from "../components/HotPro";
export default {
  name: "Mycollections",
  components: {
    Bg,
    HotPro,
  },
  data() {
    return {
      ProData: [],
    };
  },

  created() {
    this.findAllLike();
  },
  methods: {
    //返回上一页
    goUpPage(){
        this.$router.go(-1)
    },
    // 调用查看收藏商品的接收
    findAllLike() {
      // let tokenString = this.$cookies.get("TOKEN");
       let tokenString =  localStorage.getItem("TOKEN");

      this.axios({
        method: "get",
        url: "/findAllLike",
        params: {
          tokenString,
        },
      })
        .then((res) => {
          
          if (res.data.code === 2000) {
            this.ProData = res.data.result;
          }
          
        })
        .catch((err) => {
          
        });
    },
    // 调用删除收藏商品接口
    notlike(pid) {
        // let tokenString = this.$cookies.get("TOKEN")
       let tokenString =  localStorage.getItem("TOKEN");

        this.axios({
            method:"POST",
            url:"/notlike",
            data:{
                pid,
                tokenString
            }
        }).then(res =>{
            console.log("我是是删除收藏的red",res)
            this.$toast(res.data.msg)
            if(res.data.code === 900){
                this.findAllLike()
            }
        }).catch(err =>{
            

        })
    },
  },
};
</script>

<style lang="less" scoped>
.content {
  width: 95%;
  margin: 0 auto;
  //   background-color: chocolate;
  overflow-y: auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .Probox {
    flex: 0 1 50%;
    // height: 150px;
    // background-color: cornsilk;
    // margin-bottom: 10px;
  }
}
</style>